<template>
  <div class="userIndex">
    <div class="uiTop">
      <p>物流系统用户页面</p>
      <div class="user">
        <div class="headImg">
          <a href="#">
            <img src="../assets/images/pic2.jpg" />
            <span class="user_name">{{ name }}</span>
          </a>
        </div>
      </div>
    </div>
    <div class="uiContent">
      <w-col>
        <w-menu default-active="1-1" class="w-menu-vertical-demo">
          <w-submenu index="1">
            <template slot="title">
              <i class="iconfont icon-querenshouhuo-"></i>&nbsp;
              <span class="userTitle_item">我的收货订单</span>
            </template>
            <w-menu-item class="item" index="1-1" @click="receiveOrder"
              >收货订单列表</w-menu-item
            >
          </w-submenu>
          <w-submenu index="2">
            <template slot="title">
              <i class="iconfont icon-daifahuodingdan"></i>&nbsp;
              <span slot="title" class="userTitle_item">我的发货订单</span>
            </template>
            <w-menu-item class="item" index="2-1" @click="sendOrder"
              >发货订单列表</w-menu-item
            >
          </w-submenu>
          <w-submenu index="3">
            <template slot="title">
              <i class="iconfont icon-gerenxinxi"></i>&nbsp;
              <span slot="title" class="userTitle_item">个人信息管理</span>
            </template>
            <w-menu-item @click="changePsd" class="item" index="3-1"
              >修改密码</w-menu-item
            >
            <w-menu-item @click="addressBook" class="item" index="3-2"
              >地址簿</w-menu-item
            >
          </w-submenu>
          <w-menu-item index="4" @click="subOrder">
            <i class="iconfont icon-gerenxinxi"></i>&nbsp;
            <span slot="title" class="userTitle_item">提交托运订单</span>
          </w-menu-item>
        </w-menu>
      </w-col>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "UserIndex",
  data() {
    return {
        name: "",
      isShow:false
    };
  },
  methods: {
    receiveOrder() {
      this.$router.push({
        name: "shouhuo",
      });
    },
    sendOrder() {
      this.$router.push({
        name: "fahuo",
      });
      const uid =  localStorage.getItem('uid')
      
      this.$axios({
        method:"GET",
        url:"http://1.15.170.222:88/api/order/user/getMyOnWaySendOrdersByUid/" + uid
      }).then((response) => {
        console.log(response);
      })
    },
    changePsd() {
      this.$router.push({
        name: "gaimima",
      });
    },
    addressBook() {
      this.$router.push({
        name: "dizhi",
      });
    },
    subOrder() {
      this.$router.push({
        name: "tuoyundan",
      });
    },
    // showText(index) {
    //       if (this.notice[index].unread === true) {
    //         this.isShow= true;
    //       } else if (this.notice[index].unread === false) {
    //         this.isShow = false;
    //         this.notice.splice(index, 1);
    //       }
    // },
    // handleDelete(index) {
    //     this.isShow = false
    //     this.notice.splice(index, 1);
    //   },
    },
    mounted() {
      this.name = localStorage.getItem('username')
    },
};
</script>

<style>
.uiTop {
  display: flex;
  width: 100%;
  height: 60px;
  background-color: #333;
}
.uiTop p {
  color: #fff;
  font-size: 21px;
  line-height: 60px;
  margin-left: 30px;
}
.user {
  display: flex;
  height: 100%;
  margin-left: 1000px;
}
.headImg a {
  height: 100%;
  display: flex;
  flex-direction: row;
}
.headImg img {
  margin-top: 10px;
  width: 40px;
  height: 40px;
  border-radius: 30px;
}
.user_name {
  margin-left: 8px;
  line-height: 60px;
  color: #fff;
  font-size: 14px;
}
.uiContent {
  width: 250px;
  float: left;
}
.item {
  font-size: 14px;
  margin-left: 5px;
}
.w-dropdown-link {
  cursor: pointer;
}
.userTitle_item {
  font-size: 15px;
  margin-left: 5px;
}
/* .el-popconfirm__main {
  margin-bottom: 10px;
}
#el-popover-4356 {
  padding: 10px;
  width: 200px;
} */

</style>
